<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">点击</button>
</body>
<script>
    // 防抖和节流:都是为了防止短时间内高频繁调用一个接口

    // 防抖：设置延时器短时间内触发只有最后一次有效
    var timer
    document.getElementById('btn').onclick = function() {
        clearTimeout(timer)
        timer = setTimeout(function() {
            console.log(123);  // 请求
        },2000)
    }
    // 节流：设置状态锁，短时间内高频繁触发只有第一次触发成功
    var key = false
    document.getElementById('btn').onclick = function() {
        if(key == false) {
            key = true
            console.log(123);
            // 请求
            setTimeout(function() {
                key = false
            },2000)
        }
    }
    // 区别：函数节流不管事件触发有多频繁，在规定时间内一定会真正执行一次事件处理函数，
    //       而函数防抖只有在最后一次触发才会执行
</script>
</html>